<template>
	<div>
		<div class="ace">
			<table class="acetab">
				<tr>
					<td>
						<img src="aceimg/aceimg-01.png" />
					</td>
				</tr>
				<tr>
					<td>
						<h3 v-if="aces === 1">手机号注册/登录</h3>
						<h3 v-if="aces === 2">邮箱注册/登录</h3>
						<h3 v-if="aces === 3">账号密码登录</h3>
					</td>
				</tr>
				<tr>
					<td>
						<input type="number" placeholder="请输入手机号" v-if="aces === 1" />
						<input type="email" placeholder="请输入邮箱" v-if="aces === 2" />
						<input type="email" placeholder="请输入手机号/邮箱" v-if="aces === 3" />
					</td>
				</tr>
				<tr>
					<td>
						<div>
							<input type="number" placeholder="请输入验证码" v-if="aces != 3" maxlength="6" />
							<input type="password" placeholder="请输入密码" v-if="aces === 3" style="width: 98%;"/>
							<span v-if="aces != 3">获取验证码</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<router-link to="/" v-if="aces != 3">
							一键注册/登录
						</router-link>
						<router-link to="/" v-if="aces == 3">
							登录
						</router-link>
					</td>
				</tr>
				<tr>
					<td>
						<a @click="dl1()" v-if="aces === 1">
							非大陆手机号登录
						</a>
						<a @click="dl1()" v-if="aces === 2">
							手机号登录
						</a>
						<router-link to="/Wjmm" v-if="aces === 3">
							忘记密码
						</router-link>
						<!--  -->
						<a @click="dl2()" v-if="aces != 3">
							账号密码登录
						</a>
						<a @click="dl2()" v-if="aces == 3">
							验证码登录
						</a>
					</td>
				</tr>
			</table>
		</div>
		<!--  -->
		<div class="baner">
			<div class="banerr">
				<div>
					<img src="banerimg/baner-01.png" />
				</div>
				<div>
					<img src="banerimg/baner-02.png" />
				</div>
			</div>
			<div class="baner-bottom">
				<img src="banerimg/baner-04.png" style="width: 0.28rem;" v-if="photo == 1" @click="photo == 1 ? photo = 2 : photo = 1" />
				<img src="banerimg/baner-03.png" style="width: 0.28rem;" v-if="photo == 2" @click="photo == 1 ? photo = 2 : photo = 1" />
				<span v-if="aces != 3">
					未注册游侠客账号的手机，登录时将同时注册，登录代表您已
					同意
					<router-link to="/">《服务协议》</router-link>
					和
					<router-link to="/">《隐私政策》</router-link>
				</span>
				<span v-if="aces == 3">
					登录即代表您已同意
					<router-link to="/">《服务协议》</router-link>
					和
					<router-link to="/">《隐私政策》</router-link>
				</span>
			</div>
			<div class="baner-botom">
				<router-link to="/">
					体验游侠客微信小程序
					<i class="iconfont" style="font-size: 0.1rem; color: #f6edb8;">&#xe637;</i>
					<i class="iconfont" style="font-size: 0.1rem; color: #ebd758;">&#xe637;</i>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:"Ace",
	data(){
		return{
			aces:1,
			photo:1,
		}
	},
	methods:{
		dl1(){
			if(this.aces === 1){
				this.aces = 2;
			}else{
				this.aces = 1;
			}
		},
		dl2(){
			if(this.aces === 3){
				this.aces = 1;
			}else{
				this.aces = 3;
			}
		}
	}
}
</script>

<style scoped>
.ace{
	width: 100%;
}
.acetab{
	width: 100%;
}
.acetab tr td{
	width: 100%;
	text-align: center;
}
.acetab tr:nth-child(1) td img{
	margin-top: 0.2rem;
	width: 19%;
}
.acetab tr:nth-child(2) td h3{
	font-size: 0.4rem;
	font-weight: bold;
	line-height: 0.8rem;
}
.acetab tr:nth-child(3) td{
	line-height: 2rem;
}
.acetab tr:nth-child(3) td input{
	width: 90%;
	line-height: 1.1rem;
	border-radius: 0.1rem;
	background-color: #fbfbfb;
	border: none;
	text-indent: 0.8em;
	outline: none;
}
.acetab tr:nth-child(3) td input::-webkit-input-placeholder{
	color: #d4d5d4;
	font-size: 0.4rem;
}
.acetab tr:nth-child(4) td{
	line-height: 1.3rem;
}
.acetab tr:nth-child(4) td div{
	width: 91%;
	margin: 0 auto;
	line-height: 1.2rem;
	border-radius: 0.1rem;
	background-color: #fbfbfb;
}
.acetab tr:nth-child(4) td div input{
	width: 76%;
	line-height: 0.5rem;
	background-color: #fbfbfb;
	border: none;
	text-indent: 0.8em;
	outline: none;
}
.acetab tr:nth-child(4) td div input::-webkit-input-placeholder{
	color: #d4d5d4;
	font-size: 0.4rem;
}
.acetab tr:nth-child(4) td div span{
	width: 22%;
	background-color: #fbfbfb;
	height: 100%;
	display: block;
	float: right;
	font-size: 0.38rem;
	color: #ecc927;
}
.acetab tr:nth-child(5) td{
	line-height: 1.2rem;
	padding-top: 0.4rem;
}
.acetab tr:nth-child(5) td a{
	display: block;
	width: 90%;
	background-color: #fff6cc;
	margin: 0 auto;
	border-radius: 0.1rem;
	font-size: 0.4rem;
	color: #d0c9a7;
}
.acetab tr:nth-child(6) td{
	line-height: 1rem;
}
.acetab tr:nth-child(6) td a{
	font-size: 0.3rem;
	color: #aeaeae;
}
.acetab tr:nth-child(6) td a:nth-child(1){
	float: left;
	margin-left: 0.75rem;
}
.acetab tr:nth-child(6) td a:nth-child(2){
	float: right;
	margin-right: 0.75rem;
}
/*  */
.baner-bottom span a{
	color: black;
}
.baner-botom a{
	color: #ebd758;
	font-size: 0.41rem;
}
.banerr{
	display: flex;
}
.baner .banerr div{
	margin-top: 1.25rem;
	width: 50%;
	text-align: center;
	opacity: 1;
}
.banerr div img{
	width: 18%;
}
.baner-bottom{
	margin: 1.2rem auto 0;
	width: 88%;
	height: 1rem;
}
.baner-bottom span{
	line-height: 0.45rem;
	color: #aeaeae;
}
.baner-botom{
	margin: 0.1rem auto 0;
	width: 100%;
	line-height: 1rem;
	border-top: 1px solid #f3f3f3;
	margin-bottom: 1.3rem;
	text-align: center;
}
</style>
